<template>
  <view class="block3-item" @click="scenicClick(objData)">
    <image :src="objData.imageUrl[0]" mode="aspectFill">
    </image>
    <view class="block3-item-body">
      <view class="block3-item-title">{{ objData.name }}</view>
      <view class="block3-item-bqs">
        <view v-for="(ite,idx) in objData.typeNames" class="block3-item-bq">{{ ite }}</view>
      </view>
      <view class="briefIntroduction">
        {{ objData.notice }}
      </view>
      <view class="block3TtemBottom">
        <image class="block3-item-img"
               src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/%E8%B7%AF%E5%BE%84%20404.png"></image>
        <view class="block3-item-num">{{ objData.hot }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  addHot
} from "@/api/challenge";

export default {
  props: {
    objData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {};
  },
  methods: {
    scenicClick(data) {
      // console.log(data);
      addHot({
        scenicId: data.id
      }).then(res => {
        // console.log('增加热度', res);
      })

      uni.navigateTo({
        url: '/pages/popular_destination/ScenicSpotDetails?id=' + data.id + '&y=' + uni
            .getStorageSync('latitude') + '&x=' + uni.getStorageSync('longitude')
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.content {
  position: relative;
}

.content-bg {
  width: 750rpx;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
}

.content-block {
  z-index: 99;
}

.search {
  width: 550rpx;
  height: 100rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 添加边框样式 */
  border-width: 1rpx;
  /* 边框宽度 */
  border-style: solid;
  /* 边框样式，这里是实线 */
  border-color: #ccc;
  /* 边框颜色，这里设置为浅灰色 */
  /* 添加圆角样式 */
  border-radius: 8rpx;
  /* 圆角半径，可以根据需要调整 */
  background-color: #fff;
  /* 白色背景色 */

}

.block1.search-input {
  height: 80%;
  /* 设置背景色为透明 */
  background-color: transparent;
  /* 设置边框样式，这里设置为无边框 */
  border: none;
  /* 根据需要调整字体样式，这里保持不变 */
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  /* 保持字体颜色不变 */
  /* 如果需要，可以添加一些内边距 */
  padding: 5px;
  /* 如果需要，可以添加一些外边距 */
  margin: 0;

}

.messageAlert {
  width: 100rpx;
  height: 100rpx;
  /* 定制边框：宽度为2px，样式为点状线，颜色为红色 */
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 圆角边框 */
  border-radius: 10px;
}

.block1 {
  display: flex;
  flex-direction: row;
  /* 水平方向布局 */
  justify-content: space-between;
  /* 子元素居中对齐 */
  gap: 16rpx;
  /* 在子元素之间添加 16px 的间距 */
  padding: 50rpx 30rpx 0 30rpx;
  width: 690rpx;

}

.messageAlert {
  width: 100rpx;
  height: 100rpx;
}

.messageImage {
  width: 70rpx;
  height: 70rpx;
}

.block2 {
  width: 690rpx;
  padding: 50rpx 30rpx;
  /* background-color: red; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-shadow: none;
  /* 确保没有阴影效果 */
}

.block2-chilbox {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 5rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: none;
}

.block2-chilbox image {
  width: 70rpx;
  height: 70rpx;
  padding-bottom: 15rpx;
}

.block2-chilbox text {
  font-size: 28rpx;
}

.block3 {
  width: 690rpx;
  background-color: rgba(231, 242, 254, 0.9);
  padding: 30rpx;
  border-top-left-radius: 50rpx;
  border-top-right-radius: 50rpx;

}

.briefIntroduction {
  font-size: 28rpx;
  overflow: hidden;
  /*超出部分隐藏*/
  text-overflow: ellipsis;
  /*隐藏部分以省略号代替*/
  display: -webkit-box;
  /*将对象作为弹性伸缩盒子模型显示*/
  -webkit-line-clamp: 2;
  /*用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性*/
  -webkit-box-orient: vertical;
  /*子元素垂直排列*/
}

.block3-tab {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.block3-tab text {
  font-size: 35rpx;
  padding: 0 30rpx;
  padding-bottom: 20rpx;
  /* width: 10rpx; */
  /* white-space: nowrap; */
}

.block3-tab-select {
  color: blue;
  font-weight: bolder;
  border-bottom: 5rpx solid blue;
}

.block3-list {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.block3-item {
  display: flex;
  flex-direction: row;
  padding: 10rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin: 0rpx 0 32rpx 0;
  padding: 20rpx;
  justify-content: space-between;
}

.block3-item image {
  width: 230rpx;
  height: 230rpx;
}

.block3-item-body {
  flex: 1;
  margin-left: 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.block3-item-title {
  font-size: 30rpx;
  font-weight: bolder;
}

.block3-item-bqs {
  display: flex;
}

.block3-item-bq {
  background-color: orange;
  font-size: 25rpx;
  color: #fff;
  padding: 10rpx;
  border-radius: 10rpx;
  margin-right: 30rpx;
}

.block3-item-detail {
  white-space: wrap;
  display: flex;
  align-content: center;
}

.block3TtemBottom {
  display: flex;
  align-items: center;

  .block3-item-img {
    width: 32rpx;
    height: 32rpx;
  }

  .block3-item-num {
    font-size: 28rpx;
    margin-left: 8rpx;
    color: #ff5e5e;
  }
}
</style>
